<template>
  <div>
    <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
      <el-form-item label="节点id" prop="id">
        <el-input v-model="formData.id" />
      </el-form-item>
      <el-form-item label="节点名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>

      <el-form-item label="执行监听器" prop="executionListener">
        <el-badge :value="executionListenerLength">
          <el-button @click="dialogName = 'executionListenerDialog'">编辑</el-button>
        </el-badge>
      </el-form-item>
      <el-form-item label="任务监听器" v-show="showConfig.taskListener">
        <el-badge :value="taskListenerLength">
          <el-button @click="dialogName = 'taskListenerDialog'">编辑</el-button>
        </el-badge>
      </el-form-item>

      <el-form-item label="人员类型" prop="userType" v-show="showConfig.userType">
        <el-select v-model="formData.userType" placeholder="人员类型">
          <el-option v-for="item in userTypeOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="指定人员" prop="assignee" v-show="formData.userType === 'assignee'">
        <el-select v-model="formData.assignee" filterable remote placeholder="指定人员" :remote-method="remoteMethod"
          :loading="loading">
          <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id+''" />
        </el-select>
      </el-form-item>

      <el-form-item label="候选人员" prop="candidateUsers" v-show="formData.userType === 'candidateUsers'">
        <el-select v-model="formData.candidateUsers" filterable remote placeholder="候选人员" multiple
          :remote-method="remoteMethod" :loading="loading">
          <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id+''" />
        </el-select>
      </el-form-item>

      <el-form-item label="候选组" prop="candidateGroups" v-show="formData.userType === 'candidateGroups'">
        <el-select v-model="formData.candidateGroups" placeholder="候选组" multiple>
          <el-option v-for="item in groups" :key="item.id" :label="item.name" :value="item.id+''" />
        </el-select>
      </el-form-item>

      <el-form-item label="多实例">
        <el-badge :is-dot="hasMultiInstance">
          <el-button @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
        </el-badge>
      </el-form-item>

      <el-form-item label="异步" prop="async" v-show="showConfig.async">
        <el-switch v-model="formData.async" />
      </el-form-item>

      <el-form-item label="优先级" prop="priority" v-show="showConfig.priority">
        <el-input-number v-model="formData.priority" :min="1" :max="999" />
      </el-form-item>

      <el-form-item label="表单标识key" prop="formKey" v-show="showConfig.formKey">
        <el-input v-model="formData.formKey" />
      </el-form-item>

      <el-form-item label="跳过表达式" prop="skipExpression" v-show="showConfig.skipExpression">
        <el-input v-model="formData.skipExpression" />
      </el-form-item>

      <el-form-item label="是否为补偿" prop="isForCompensation" v-show="showConfig.isForCompensation">
        <el-switch v-model="formData.isForCompensation" />
      </el-form-item>

      <el-form-item label="服务任务可触发" prop="triggerable" v-show="showConfig.triggerable">
        <el-switch v-model="formData.triggerable" />
      </el-form-item>

      <el-form-item label="自动存储变量" prop="autoStoreVariables" v-show="showConfig.autoStoreVariables">
        <el-switch v-model="formData.autoStoreVariables" />
      </el-form-item>

      <el-form-item label="输入变量" prop="ruleVariablesInput" v-show="showConfig.ruleVariablesInput">
        <el-input v-model="formData.ruleVariablesInput" />
      </el-form-item>

      <el-form-item label="规则" prop="rules" v-show="showConfig.rules">
        <el-input v-model="formData.rules" />
      </el-form-item>

      <el-form-item label="结果变量" prop="resultVariable" v-show="showConfig.Variable">
        <el-input v-model="formData.resultVariable" />
      </el-form-item>

      <el-form-item label="排除" prop="exclude" v-show="showConfig.exclude">
        <el-switch v-model="formData.exclude" />
      </el-form-item>

      <el-form-item label="类" prop="class" v-show="showConfig.class">
        <el-input v-model="formData.class" />
      </el-form-item>

      <el-form-item label="到期时间" prop="dueDate" v-show="showConfig.dueDate">
        <el-date-picker v-model="formData.dueDate" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ[Z]"/>
      </el-form-item>

      <el-form-item label="节点描述" prop="documentation">
        <el-input v-model="formData.documentation" type="textarea" autosize />
      </el-form-item>
    </el-form>
    <executionListenerDialog v-if="dialogName === 'executionListenerDialog'" :element="element" :modeler="modeler"
      @close="finishExecutionListener" />
    <taskListenerDialog v-if="dialogName === 'taskListenerDialog'" :element="element" :modeler="modeler"
      @close="finishTaskListener" />
    <multiInstanceDialog v-if="dialogName === 'multiInstanceDialog'" :element="element" :modeler="modeler"
      @close="finishMultiInstance" />
  </div>
</template>

<script>
import mixinPanel from '../../common/mixinPanel'
import executionListenerDialog from './property/executionListener.vue'
import taskListenerDialog from './property/taskListener.vue'
import multiInstanceDialog from './property/multiInstance.vue'
import { commonParse, userTaskParse } from '../../common/parseElement'
import { arrJoin } from '/@/utils/common'
import { selectPage as selectUserPage } from '/@/api/sys/user'
import { selectAll as selectRole } from '/@/api/sys/role'

export default {
  components: {
    executionListenerDialog,
    taskListenerDialog,
    multiInstanceDialog
  },
  mixins: [mixinPanel],
  props: {
  },
  data() {
    return {
      userTypeOption: [
        { label: '指定人员', value: 'assignee' },
        { label: '候选人员', value: 'candidateUsers' },
        { label: '候选组', value: 'candidateGroups' }
      ],
      users: [],
      groups: [],
      dialogName: '',
      loading: false,
      executionListenerLength: 0,
      taskListenerLength: 0,
      hasMultiInstance: false,
      formData: {},
      rules: {
        id: [
          { required: true, message: 'Id 不能为空', trigger: 'blur' },
        ],
      },
      defaultTime: new Date()
    }
  },
  watch: {
    'formData.userType': function (val, oldVal) {
      if (oldVal) {
        const types = ['assignee', 'candidateUsers', 'candidateGroups']
        types.forEach(type => {
          delete this.element.businessObject.$attrs[`flowable:${type}`]
          delete this.formData[type]
        })
      }
    },
    'formData.assignee': function (val) {
      if (this.formData.userType !== 'assignee') {
        delete this.element.businessObject.$attrs[`flowable:assignee`]
        return
      }
      this.updateProperties({ 'flowable:assignee': val })
    },
    'formData.candidateUsers': function (val) {
      if (this.formData.userType !== 'candidateUsers') {
        delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
        return
      }
      this.updateProperties({ 'flowable:candidateUsers': arrJoin(val) })
    },
    'formData.candidateGroups': function (val) {
      if (this.formData.userType !== 'candidateGroups') {
        delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
        return
      }
      this.updateProperties({ 'flowable:candidateGroups': arrJoin(val) })
    },
    'formData.async': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:async': true })
    },
    'formData.dueDate': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:dueDate': val })
    },
    'formData.formKey': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:formKey': val })
    },
    'formData.priority': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:priority': val })
    },
    'formData.skipExpression': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:skipExpression': val })
    },
    'formData.isForCompensation': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'isForCompensation': val })
    },
    'formData.triggerable': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:triggerable': val })
    },
    'formData.class': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:class': val })
    },
    'formData.autoStoreVariables': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:autoStoreVariables': val })
    },
    'formData.exclude': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:exclude': val })
    },
    'formData.ruleVariablesInput': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:ruleVariablesInput': val })
    },
    'formData.rules': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:rules': val })
    },
    'formData.resultVariable': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:resultVariable': val })
    }
  },
  created() {
    let cache = commonParse(this.element)
    cache = userTaskParse(cache)
    this.formData = cache
    this.computedExecutionListenerLength()
    this.computedTaskListenerLength()
    this.computedHasMultiInstance()

    selectRole().then(obj => {
      this.groups = obj.data
      console.log(obj.data);
    })

    this.remoteMethod()
  },
  methods: {
    computedExecutionListenerLength() {
      const extensionElements = this.element.businessObject.extensionElements
      this.executionListenerLength = extensionElements ? extensionElements.values.filter(item => item.$type === 'flowable:ExecutionListener').length : 0
    },
    computedTaskListenerLength() {
      this.taskListenerLength = this.element.businessObject.extensionElements?.values
        ?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
    },
    computedHasMultiInstance() {
      if (this.element.businessObject.loopCharacteristics) {
        this.hasMultiInstance = true
      } else {
        this.hasMultiInstance = false
      }
    },
    finishExecutionListener() {
      if (this.dialogName === 'executionListenerDialog') {
        this.computedExecutionListenerLength()
      }
      this.dialogName = ''
    },
    finishTaskListener() {
      if (this.dialogName === 'taskListenerDialog') {
        this.computedTaskListenerLength()
      }
      this.dialogName = ''
    },
    finishMultiInstance() {
      if (this.dialogName === 'multiInstanceDialog') {
        this.computedHasMultiInstance()
      }
      this.dialogName = ''
    },
    remoteMethod(query) {
      let params = {
        page: 1,
        size: 10,
      }
      this.loading = true
      if (query) {
        params.entity = { name: query }
      }

      selectUserPage(params).then(obj => {
        this.users = obj.data.records
        console.log(obj.data);
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
.el-form-item__content {
  .el-select {
    width: 253.6px;
  }

  .el-date-editor {
    width: 260px;
  }
}
</style>
